<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>

  <body>
    <div id="app">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="down()">下移</el-button>
        <el-button @click="up()">上移</el-button>
        <el-button @click="save()">保存</el-button>
      </div>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          tableData: [
            {
              index: 0,
              date: "1",
              name: "王小虎1",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              index: 1,
              date: "2",
              name: "王小虎2",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              index: 2,
              date: "3",
              name: "王小虎3",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              index: 3,
              date: "4",
              name: "王小虎4",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              index: 4,
              date: "5",
              name: "王小虎5",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              index: 5,
              date: "6",
              name: "王小虎6",
              address: "上海市普陀区金沙江路 1518 弄",
            },
          ],
          multipleSelection: [],
          upTimes: 0,
          downTimes: 0,
        };
      },
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        save() {
          this.upTimes = 0;
          this.downTimes = 0;
        },
        copy(data) {
          return JSON.parse(JSON.stringify(data));
        },
        up() {
          // 获取移动后的坐标
          const oldIndexList = [];
          const moveedIndex = [];
          const nowDataList = this.copy(this.tableData);
          const selectedDataList = this.copy(this.multipleSelection);
          nowDataList.forEach((data, index) => {
            selectedDataList.forEach((select) => {
              if (select.date === data.date) {
                oldIndexList.push(index);
                moveedIndex.push(index - 1);
              }
            });
          });
          while (moveedIndex[0] < 0) {
            moveedIndex[0] += 1;
            let k = 0;
            while (
              k < moveedIndex.length - 1 &&
              moveedIndex[k + 1] === moveedIndex[k]
            ) {
              moveedIndex[k + 1] += 1;
              k++;
            }
          }
          console.log("oldIndexList: ", oldIndexList);
          console.log("moveedIndex: ", moveedIndex);
          oldIndexList.forEach((oldIndex, index) => {
            const item = this.tableData.splice(oldIndex, 1)[0];
            this.tableData.splice(moveedIndex[index], 0, item);
          });
        },
        down() {
          // 获取移动后的坐标
          const oldIndexList = [];
          const moveedIndex = [];
          const nowDataList = this.copy(this.tableData);
          const selectedDataList = this.copy(this.multipleSelection);

          const selectedIds = [];
          selectedDataList.forEach((select) => {
            selectedIds.push(select.date);
          });

          nowDataList.forEach((data, index) => {
            if (!selectedIds.includes(data.date)) {
              oldIndexList.push(index);
              moveedIndex.push(index - 1);
            }
          });

          while (moveedIndex[0] < 0) {
            moveedIndex[0] += 1;
            let k = 0;
            while (
              k < moveedIndex.length - 1 &&
              moveedIndex[k + 1] === moveedIndex[k]
            ) {
              moveedIndex[k + 1] += 1;
              k++;
            }
          }
          console.log("oldIndexList: ", oldIndexList);
          console.log("moveedIndex1: ", moveedIndex);
          moveedIndex.forEach((item, index) => {
            if (index > 0 && item - 1 != oldIndexList[index - 1]) {
              moveedIndex[index] = oldIndexList[index - 1] + 1;
            }
          });
          moveedIndex[0] = 0;
          console.log("moveedIndex2: ", moveedIndex);

          oldIndexList.forEach((oldIndex, index) => {
            const item = this.tableData.splice(oldIndex, 1)[0];
            this.tableData.splice(moveedIndex[index], 0, item);
          });
        },
      },
    });
  </script>
</html>
